<template>
  <h4>当前求和:{{sum}}</h4>
  <button @click="sum++">点我++</button>
  <hr>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <h2 v-show="person.car">座驾信息：{{person.car}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车</button>
  <button @click="person.car.name+='!'">换车名</button>
  <button @click="person.car.price++">换价格</button>
  <button @click="change">换车价格</button>
</template>

<script>
  // import {h} from 'vue'
  import { ref, reactive, toRefs, toRaw,markRaw} from 'vue' 
  export default {
    name: 'Demo',
    setup() {
      //数据
      let sum  = ref(0)
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })
      //toRaw
        //作用：将一个由reactive生成的响应对象转为普通对象。
        //使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面刷新
      //markRaw
        //作用：标记一个对象，使其永远不会再成为响应式对象.
        //应用场景：
            //1:有一些值不应被设置成响应式的,例如复杂的第三方类库等
            //2:当渲染具有不可变数据的大队列时,跳过响应式转换可以提高性能
      function showRawPerson(){
        const p = toRaw(person)
        console.log(p)
        console.log(person);
      }
      function addCar(){
        let car = {name:'奔驰',price:40}
        person.car = markRaw(car)
        console.log(person.car);
      }
      function change(){
        person.car.price++
        console.log(person.car.price);
      }
      return {
        sum,
        person,
        ...toRefs(person),
        showRawPerson,
        addCar,
        change
      }
    },
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
